<template>
  <div>
    <el-steps :active="active" finish-status="success">
  <el-step title="步骤 1"></el-step>
  <el-step title="步骤 2"></el-step>
  <el-step title="步骤 3"></el-step>
</el-steps>


  <!--  步骤一  -->
  <div  v-show="BatchClaim1" >
    <h4>在这里筛选你需要批量修改的数据   acvite1</h4>
    
     <el-form :inline="true" :model="active1Math" class="demo-form-inline">
       <el-col>
        <el-form-item label="请选择项目:">
         <el-select v-model="active1Math.project" clearable filterable placeholder="请选择项目" >
          <el-option
            v-for="item in selectData"
            :key="item.projectid"
            :label="item.projectName"
            :value="item.projectid" />
        </el-select>
      </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="设备类型:">
        <el-select v-model="active1Math.type" clearable filterable placeholder="设备类型">
          <el-option label="滚筒洗衣机" value="0"></el-option>
          <el-option label="波轮洗衣机" value="1"></el-option>
          <el-option label="吹风机" value="2"></el-option>
          <el-option label="洗鞋机" value="3"></el-option>
        </el-select>
      </el-form-item>
      </el-col>
     
        
        <el-col >
            <el-form-item label="设备编号:">
                <el-input
                v-model="active1Math.Number"
                placeholder="设备编号 或者 蓝牙编码"
                ></el-input>
            </el-form-item>
        </el-col>
         <el-col >
            <el-form-item label="最大条数:">
                <el-input
                v-model="active1Math.limit"
                
                placeholder="查询条数"
                ></el-input>
            </el-form-item>
        </el-col>
       
        
    
        

       <!-- <el-form-item>
        <el-button type="primary" >扫码</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmitActive">查询</el-button>
      </el-form-item> -->

    </el-form>
  </div>

    <!--  步骤二 -->
    <div  v-show="BatchClaim2" >

  
   <h4>设备工作类型</h4>
    <div>
      <el-table :data="tabledatas" border>
         
          <el-table-column label="扫码可见">
          <template slot-scope="scope">
            <el-input
              placeholder="扫码可见"
              v-show="show"
              v-model="scope.row.tab0"
            ></el-input>
             <!-- <span v-show="!show">{{ scope.row.tab0 }}</span> -->
            <el-switch v-model="scope.row.tab0"></el-switch>
          
          </template>
        </el-table-column>
          
        <el-table-column label="类型">
          <template slot-scope="scope">
            <el-input
              placeholder="请输入内容"
              v-show="show"
             v-model="scope.row.functionType"
            ></el-input>
            <span v-show="!show"
              ><div class="cell">
                <div
                  data-v-c1cf8528=""
                  class="el-input-number el-input-number--medium"
                  suffix-icon="el-icon-coin"
                  style="width: 150px"
                >
                 
              
                  <div class="el-input el-input--medium"> 
                   <input type="text" autocomplete="off" class="el-input__inner"  v-model="scope.row.functionType">
                  </div>
                </div>
              </div>
              </span
            >
          </template>
        </el-table-column>
        <el-table-column label="时长（/min）">
          <template slot-scope="scope">
            <el-input
              placeholder="请输入内容"
              v-show="show"
             v-model="scope.row.functionTime"
            ></el-input>
            <span v-show="!show"
              ><div class="cell">
                <div
                  data-v-c1cf8528=""
                  class="el-input-number el-input-number--medium"
                  suffix-icon="el-icon-coin"
                  style="width: 150px"
                >
                 
              
                  <div class="el-input el-input--medium"> 
                   <input type="number" autocomplete="off" class="el-input__inner"  v-model="scope.row.functionTime">
                  </div>
                </div>
              </div>
              </span
            >
          </template>
        </el-table-column>
        <el-table-column label="价格（元）">
          <template slot-scope="scope">
            <el-input
              placeholder="请输入内容"
              v-show="show"
             v-model="scope.row.money"
            ></el-input>
            <span v-show="!show"
              ><div class="cell">
                <div
                  data-v-c1cf8528=""
                  class="el-input-number el-input-number--medium"
                  suffix-icon="el-icon-coin"
                  style="width: 150px"
                >
                  <span role="button" class="el-input-number__decrease">
                      <i class="el-icon-minus" v-on:click="subtract(scope.row.money)"></i>
                  </span >
                 <span role="button" class="el-input-number__increase">
                     <i class="el-icon-plus" v-on:click="add(scope.row.money)"></i>
                 </span>
                  <div class="el-input el-input--medium">
                    <!----><input
                      type="text"
                      autocomplete="off"
                      max="Infinity"
                      min="0"
                      v-model="scope.row.money"
                      id="scope.row.tab2"
                      class="el-input__inner"
                      role="spinbutton"
                      aria-valuemax="Infinity"
                      aria-valuemin="0"
                      aria-valuenow="2"
                      aria-disabled="undefined"
                    />
                  </div>
                </div>
              </div>
              </span
            >
          </template>
        </el-table-column>
        <el-table-column label="描述">
          <template slot-scope="scope">
            <el-input
              placeholder="请输入内容"
              v-show="show"
              v-model="scope.row.describes"
            ></el-input>
              <div class="el-input el-input--medium"> 
                    <input type="text" autocomplete="off" class="el-input__inner"  v-model="scope.row.describes">
              </div>
          </template>
        </el-table-column>
        
      </el-table>
      <!-- <el-button @click="show = true">编辑</el-button> -->
      <!-- <el-button @click="FunctionSubim()">提交</el-button> -->
    </div>

  
  
  </div>

<!--  步骤三 -->
  <div v-show="BatchClaim3">
      <el-table :data="Batchtable" tooltip-effect="dark" ref="currentRow"  style="width: 100%"   highlight-current-row   >
      <el-table-column
      type="index"
      width="55">
    </el-table-column   >
      <el-table-column prop="functionType" label="修改成功"> </el-table-column>
      <el-table-column prop="number" label="设备编号"> </el-table-column>
      <el-table-column prop="projectName" label="所属项目" > </el-table-column>
      <el-table-column prop="types" label="设备类型" width="220px"> </el-table-column>
        <el-table-column fixed="right" label="去除">
        <template slot-scope="scope">
          
         
						<el-popconfirm title="这是一段内容确定去除吗？" @confirm="handleDelete(scope.row.id)">
							<el-button type="text" slot="reference">删除</el-button>
						</el-popconfirm>
				
         
        </template>
      </el-table-column>
      <!-- <el-table-column prop="describes" label="去除" width="220px"> 
        	<el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleDelete(scope.row.id)">
							<el-button type="text" slot="reference">删除</el-button>
						</el-popconfirm>
      </el-table-column> -->
    </el-table>
    <div>请核对你需要批量修改的设备信息，共：{{total}}条 ，成功：{{total}}条 ，失败：{{total}}条  <el-button type="primary" style="float:right" @click="FunctionSubim()">提交</el-button> </div>
  </div>
  
  
<el-button @click="prev" >上一步</el-button>
<el-button style="margin-top: 12px; " @click="next">下一步</el-button>
</div>
</template>

<script>
export default {
 data() {
    return {
    //默认显示第一个组件
        active: 1,
        BatchClaim1:true,
        BatchClaim2:false,
        BatchClaim3:false,
        total:10,
        active1Math: {limit:200},   
        Batchtable: [],
        selectData:[],
        tabledatas:[
          {
          // baseid:"f6887bad54f9a377c0a50097fa932c55",
            describes:"对桶内壁进行清洁功能",
            functionStatus:0,
            functionTime:10,
            functionType:"洁桶",
            //functionid:"161da11f47e53c926eb10f29d1ee5da3",
            money:0.5,
            tab0:true
          },
          {
          // baseid:"f6887bad54f9a377c0a50097fa932c55",
            describes:"适用3/4 洗净待脱水的衣物！！！大约20分钟",
            functionStatus:0,
            functionTime:15,
            functionType:"脱水",
            //functionid:"161da11f47e53c926eb10f29d1ee5da3",
            money:1,
            tab0:true
          },
          {
            //baseid:"f6887bad54f9a377c0a50097fa932c55",
            describes:"适用3/4 重度脏污的衣物！！！大约45分钟",
            functionStatus:0,
            functionTime:40,
            functionType:"加强洗",
            //functionid:"161da11f47e53c926eb10f29d1ee5da3",
            money:4,
            tab0:true
          },
          {
          // baseid:"f6887bad54f9a377c0a50097fa932c55",
            describes:"适用3/4 脏污的衣物！！！大约35分钟",
            functionStatus:0,
            functionTime:30,
            functionType:"标准洗",
            //functionid:"161da11f47e53c926eb10f29d1ee5da3",
            money:3,
            tab0:true
          },
          {
          // baseid:"f6887bad54f9a377c0a50097fa932c55",
            describes:"适用3/4 轻度脏污的衣物！！！大约25分钟",
            functionStatus:0,
            functionTime:25,
            functionType:"快速洗",
            //functionid:"161da11f47e53c926eb10f29d1ee5da3",
            money:2.5,
            tab0:true
          },

        ] 
    }
  },
  created(){
    this.selectDataMethod()
  },
   
   methods: {
      // 查询全部的项目信息
    selectDataMethod() {
      this.$axios
        .get("/tProjectBase/list", {
          params: {
            current: 0,
            size: 0,
          },
        })
        .then((res) => {
          console.log(res.data.data);
          this.selectData = res.data.data;
        });
    },
    /// 去除待修改费率的设备基础信息，
    handleDelete(id){
       alert("去除待修改费率的设备基础信息，"+id)
       this.Batchtable.some((item,i)=>{
          if(item.id==id){
　　　　　　　this.Batchtable.splice(i, 1)
　　　　　　　//在数组的some方法中，若是return true，就会当即终止这个数组的后续循环
　　　　　　　return true
　　　　　　}
       })
       console.log(this.Batchtable.length)
    },
      add:function(count){
        //var modal = weex.requireModule(count);
        //console.log(count)
        const countmath=count-0;
        try{
          this.tabledatas.forEach(function(index, item){
            //console.log(index)
            const countmaths=index.money-0
            //console.log(countmaths)   
            //console.log(countmaths==countmath.toFixed(2))
            if(countmaths==countmath.toFixed(2)){
                index.money=(countmaths+0.10).toFixed(2);
                throw new Error("EndIterative");
            }
            
          });
        }catch(e){

        }
       

        
       },
        subtract:function(count){
              //console.log(count)
        const countmath=count-0;
        try{
          this.tabledatas.forEach(function(index, item){
            //console.log(index)
            const countmaths=index.money-0
            //console.log(countmaths)   
            //console.log(countmaths==countmath.toFixed(2))
            if(countmaths==countmath.toFixed(2)){
                if((countmaths-0.10).toFixed(2)<=0){
                    
                  this.$message({
                    message: '当前金额最低，不能在减了！！！',
                    type: 'warning'
                  });
                }else{
                  index.money=(countmaths-0.10).toFixed(2);
                  //index.tab2=index.tab2+0.10;
                  //alert("- "+index.money) 
                }
                
                //break;
                	throw new Error("EndIterative");
            }
            
          });
        }catch(e){

        }
        
        },
   
   //上一步
   prev() {
     console.log('上一步'+this.active)
//  if (this.active == 1 ) this.active = 1;
//       if (this.active == 2) this.active = 1;
//       if (this.active == 3) this.active = 2;
//       else{
//          this.active = 1
//       }
     if(this.active==1){
        this.BatchClaim1=true
        this.BatchClaim2=false
        this.BatchClaim3=false
     }
    else if(this.active==2){
      this.active=1,
       this.BatchClaim1=true
        this.BatchClaim2=false
        this.BatchClaim3=false

     }
     else if(this.active==3){
       this.active=2
        this.BatchClaim1=false
        this.BatchClaim2=true
        this.BatchClaim3=false
     }
    //  if(this.active>1){
    //    this.active--;

    //  }
    },
    next(){
    //下一步
     console.log('下一步'+this.active)
    //  if (this.active ==1) this.active = 2;
    //   if (this.active ===2) this.active = 3;
    //   if (this.active ==3) this.active = 3;
     
     if(this.active==1){
       console.log(this.active1Math.project=="undefined")
       console.log(this.active1Math.type=="undefined"&&this.active1Math.project=="undefined")
       if(this.active1Math.type=="undefined"&&this.active1Math.project=="undefined"){
          alert("请选择项目和设备类型")
       }else{
        this.$confirm('请检查你是否选择项目 以及 设备类型').then(_ => {
          this.active=2
          this.BatchClaim1=false
          this.BatchClaim2=true
          this.BatchClaim3=false
        }).catch(_ => {

        })
        
       }
        
       
      
     }
    else if(this.active==2){
      this.active=3
       this.BatchClaim1=false
        this.BatchClaim2=false
        this.BatchClaim3=true
         this.$axios
        .get("/tFacilityBase/list", {
          params: {
            page: 0,
            limit: this.active1Math.limit,
            type: this.active1Math.type,
            model: null,
            math: this.active1Math.Number,
            projectid: this.active1Math.project,
            address: null,
          },
        })
        .then((res) => {
          console.log(res);
          this.Batchtable = res.data.data;

          this.total = res.data.count;
        });

     }
     else if(this.active==3){
       this.active=3
        this.BatchClaim1=false
        this.BatchClaim2=false
        this.BatchClaim3=true
     }
    // if(this.active<3 ){
    //    this.active++;
       
    //  }
       
       
      }
  }
}
</script>

<style>

</style>
